<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>微信支付页</title>
    <link rel="stylesheet" type="text/css" href="./css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="./css/pay.css"/>
    <link rel="stylesheet" type="text/css" href="./css/pages-weixinpay.css"/>
</head>

<body>
<!--head-->
<div class="top">
    <div class="py-container">
        <div class="shortcut">
            <ul class="fl">
                <li class="f-item">黑马欢迎您！</li>
                <li class="f-item">请登录　<span><a href="#">免费注册</a></span></li>
            </ul>
            <ul class="fr">
                <li class="f-item">我的订单</li>
                <li class="f-item space"></li>
                <li class="f-item">我的黑马</li>
                <li class="f-item space"></li>
                <li class="f-item">黑马会员</li>
                <li class="f-item space"></li>
                <li class="f-item">企业采购</li>
                <li class="f-item space"></li>
                <li class="f-item">关注黑马</li>
                <li class="f-item space"></li>
                <li class="f-item">客户服务</li>
                <li class="f-item space"></li>
                <li class="f-item">网站导航</li>
            </ul>
        </div>
    </div>
</div>
<div id="app" class="cart py-container">
    <!--logoArea-->
    <div class="logoArea">
        <div class="fl logo">
            <span class="title">收银台</span>
        </div>
    </div>
    <!--主内容-->
    <div class="checkout py-container  pay">
        <div class="checkout-tit">
            <h4 class="fl tit-txt">
                <span class="success-icon"></span>
                <span class="success-info">订单提交成功，订单号：{{order.id}}。请您及时付款，订单将在时间
          <span style="color: #9d261d">{{remainTime}}</span> 后取消。</span>
            </h4>
            <span class="fr">
						<em class="sui-lead">应付金额：</em>
						<em class="orange money">￥{{util.formatPrice(order.totalFee)}}</em>元</span>
            <div class="clearfix"></div>
        </div>
        <div class="checkout-steps">
            <div class="container">
                <div class="tab-wrapper">
                    <!--tab section 1-->
                    <input type="radio" name="tab-radio" v-model="tab" :value="1" class="tab-radio" id="tab-radio-1"
                           checked>
                    <label for="tab-radio-1" class="tab-handler tab-handler-1" :class='{"tab-selected": tab === 1}'>支付宝支付</label>
                    <!--tab section 2-->
                    <input type="radio" name="tab-radio" v-model="tab" :value="2" id="tab-radio-2" class="tab-radio">
                    <label for="tab-radio-2" class="tab-handler tab-handler-2"
                           :class='{"tab-selected": tab === 2}'>微信支付</label>
                    <!--tab section 3-->
                    <input type="radio" name="tab-radio" v-model="tab" :value="3" id="tab-radio-3" class="tab-radio">
                    <label for="tab-radio-3" class="tab-handler tab-handler-3"
                           :class='{"tab-selected": tab === 3}'>余额支付</label>

                    <div class="tab-content" v-show="tab === 1 || tab === 2">
                        <div class="fl sao">
                            <div class="fl code">
                                <div id="qrImage2">
                                    <img src="./img/erweima.png" alt="">
                                </div>
                                <div class="saosao">
                                    <p>请使用{{paymentTypes[tab - 1]}}扫一扫</p>
                                    <p>扫描二维码支付</p>
                                </div>
                            </div>
                            <div class="fl phone">

                            </div>

                        </div>
                    </div>
                    <div class="tab-content" v-show="tab === 3">

                        <label for="payPassword">请输入支付密码：</label>
                        <input id="payPassword" type="password" v-model="password">

                        <button href="javascript:void(0)" @click="confirmPay(password)">确认支付</button>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="js/common.js"></script>
<script src="js/qrcode.min.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                util, // 工具类
                order: {id: 458010519, totalFee: 298400, paymentType: 3}, // 订单信息
                paymentTypes: ["支付宝", "微信", "余额"], // 支付方式
                tab: 3, // 标签页
                password: "", // 支付密码
                remainTime: ""
            }
        },
        created() {
            // 查询订单
            axios.get("/order/" + util.getUrlParam("id"))
                .then(resp => {
                    // 查询到订单了
                    this.order = resp.data;
                    this.order.id = util.getUrlParam("id");
                    this.tab = this.order.paymentType;
                    // 判断是否是扫码支付
                    if (this.tab !== 3) {
                        // 需要扫码支付，获取支付链接
                        this.getPayUrl(this.order.id);
                    }
                    // 设置倒计时
                    const deadLine = new Date(this.order.createTime).getTime() + 1800000;
                    const tid = setInterval(() => {
                        const remainTime = deadLine - new Date().getTime();
                        this.remainTime = Math.floor(remainTime / 60000) + "分" + Math.floor((remainTime % 60000) / 1000) + "秒";
                    })
                    setTimeout(() => {
                        // 清除倒计时
                        clearInterval(tid)
                        // 跳转到失败页
                        alert("支付超时！");
                    }, deadLine - new Date().getTime())
                })
                .catch(err => console.log(err));
        },
        watch: {
            tab(val) {
                if (val !== 3) {
                    // 需要扫码支付，查询支付链接
                    this.getPayUrl(this.order.id);
                }
            }
        },
        methods: {
            confirmPay(payPassword) {
                let id = util.getUrlParam("id");
                axios.post("/order/pay", {"orderId":util.getUrlParam("id"),"payPassword":payPassword})
                    .then(resp => {
                        // 获取订单id
                        let payFlag = resp.data;
                        if (payFlag) {
                            // 跳转到付款成功页
                            location.href = "/paysuccess.html?orderId=" + id;
                            //
                            console.log(payFlag);
                        } else {
                            alert("支付失败，请重试！")
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    });
            },
            getPayUrl(id) {
                axios.get("/pay/url/" + this.tab + "/" + id)
                    .then(resp => {
                        // 生成二维码
                        new QRCode(document.getElementById("qrImage"), {
                            text: resp.data,
                            width: 250,
                            height: 250,
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.H
                        });
                        // 开启定时任务，查询付款状态
                        const taskId = setInterval(() => {
                            this.queryOrderStatus(taskId);
                        }, 3000);
                        // 同时设置一个定时任务，5分钟后，去微信主动查询支付结果，如果依然失败，终止查询，认为付款失败
                        setTimeout(() => {
                            // 清除之前的定时任务
                            clearInterval(taskId);
                            // 主动查询支付状态
                            this.queryPayStatus();
                        }, 300000)
                    })
                    .catch(err => console.log(err));
            },
            queryOrderStatus(taskId) {
                axios.get("/order/status/" + id)
                    .then(resp => {
                        let i = resp.data;
                        if (i === 5) {
                            // 付款失败
                            clearInterval(taskId);
                            // 跳转到付款失败页
                            alert("支付失败，请重试！")
                        } else if (i !== 1) {
                            // 付款成功
                            clearInterval(taskId);
                            // 跳转到付款成功页
                            location.href = "/paysuccess.html?orderId=" + id;
                        }
                    }).catch((e) => {
                    alert("支付状态查询失败，请刷新页面重试。");
                    clearInterval(taskId);
                })
            },
            queryPayStatus() {
                axios.get("/pay/status/" + id)
                    .then(resp => {
                        let i = resp.data;
                        // i是返回的状态，1代表未支付、2代表已支付、3代表支付失败、4正在支付
                        if (i !== 2) {
                            // 未支付或者支付失败，跳转到失败页
                            alert("支付失败，请重试！")
                        }
                        // 已经支付，跳转到支付成功页面
                        location.href = "/paysuccess.html?orderId=" + id;
                    })
                    .catch(err => {
                        console.log(err)
                        alert("支付失败，请重试！")
                    })
            }
        }
    });
</script>
</body>

</html>